<template>
  <div class="screenshot-page">
    <ScreenshotMain ref="screenshotRef" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import ScreenshotMain from '@/components/Screenshot/ScreenshotMain.vue'

// 全局监听 ESC 键（作为备用）
const handleGlobalEscape = (e: KeyboardEvent) => {
  if (e.key === 'Escape' || e.code === 'Escape') {
    console.log('截图页面: 全局 ESC 触发')
    e.preventDefault()
    e.stopPropagation()
    
    // 关闭截图窗口
    if (window.electronAPI) {
      window.electronAPI.closeScreenshot()
    } else {
      // 返回主页
      window.location.hash = '#/'
    }
  }
}

onMounted(() => {
  console.log('截图页面已挂载')
  // 添加全局 ESC 监听（最高优先级）
  window.addEventListener('keydown', handleGlobalEscape, { capture: true })
})

onUnmounted(() => {
  console.log('截图页面已卸载')
  window.removeEventListener('keydown', handleGlobalEscape, { capture: true })
})
</script>

<style scoped>
.screenshot-page {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: #000;
}
</style>
